{extend name='index@template/base'}{/extend}
{block name='style'}{/block}
{block name='script'}{/block}
{block name='content'}
<div class="row">


    <div class="col-xs-12">
        <div class="box-body">
            <div class="row">
                <div class="col-xs-4">
                    <div class="input-group col-xs-12">
                        <span class="input-group-addon">关键字</span>
                        <input type="text" class="form-control" id="keyword" placeholder="订单号、用户名、手机号、微信号、备注"/>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="input-group">
                        <span class="input-group-addon">订单时间</span>
                        <input class="form-control datetimepicker" type="text" name="begindate"
                               id="begindate" placeholder="起始日期"/>
                        <span class="input-group-addon" style="width:1em;">至</span>
                        <input class="form-control datetimepicker" type="text" name="enddate" id="enddate"
                               placeholder="截止日期"/>
                    </div>
                </div>
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary" id="btn_search"><i
                            class="glyphicon glyphicon-search"></i> 搜索
                    </button>
                    <!--<button type="button" class="btn btn-default" id="btn_export"><i-->
                            <!--class="glyphicon glyphicon-export"></i> 导出Excel-->
                    <!--</button>-->
                </div>
            </div>

        </div>

    </div>


    <div class="col-xs-12">
        <div class="box">
            <div class="box-body">
                <table id="table"
                       data-toggle="table"
                       data-striped="true"
                       data-query-params="requestParam"
                       data-side-pagination="server"
                       data-pagination="true"
                       data-url="{:url('AccountRechargeOrder/index_data')}"
                >
                    <thead>
                    <tr>
                        <th data-field="order_sn">充值单号</th>
                        <th data-field="nick">操作用户</th>
                        <th data-field="mobile">手机</th>
                        <th data-field="wechat">微信号</th>
                        <th data-field="pay_amount" data-formatter="forMoney">充值金额</th>
                        <th data-field="pay_type" data-formatter="formatPayType">支付方式</th>
                        <th data-field="flag_pay" data-formatter="formatStatus">支付状态</th>
                        <th data-field="order_time" data-formatter="formatTime">订单时间</th>
                        <th data-field="remark">备注</th>
                    </tr>
                    </thead>
                </table>
            </div><!-- /.box-body -->
        </div><!-- /.box -->

    </div><!-- /.col -->
</div><!-- /.row -->
{/block}
{block name='script_extra'}
<script>
    // <editor-fold defaultstate="collapsed" desc="初始化日期控件">
    $('.datetimepicker').datetimepicker({
        format: "Y-m-d",
        lang: 'ch',
        timepicker: false,
        allowBlank: true
    });
    // </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="搜索参数配置及触发事件">
    var temp = {};

    function requestParam(params) {
        temp = {
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            order: params.order,
            sort: params.sort,
            search: params.search,
            keyword: $("#keyword").val(),
            begindate: $("#begindate").val(),
            enddate: $("#enddate").val()
        };
        return temp;
    }

    //搜索按钮事件
    $("#btn_search").on('click', function () {
        $('#table').bootstrapTable('refresh');
    })
    // </editor-fold>

    //<editor-fold defaultstate="collapsed" desc="时间格式化">

    function formatTime(value) {
        if (value) {
            var date = new Date(parseInt(value) * 1000);
            Y = date.getFullYear() + '-';
            M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            D = (date.getDate() + 1 < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            h = (date.getHours() + 1 < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            m = (date.getMinutes() + 1 < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            s = (date.getSeconds() + 1 < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;
        }

    }

    //</editor-fold>

    // <editor-fold defaultstate="collapsed" desc="支付状态格式化">
    function formatStatus(value) {
        switch(value){
            case 0:
                return '<span class="badge">未支付</span>';break;
            case 1:
                return '<span class="badge bg-green">已支付</span>';break;
        }

    }
    // </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="支付方式格式化">
    function formatPayType(value) {
        switch(value){
            case 0:
                return '-';break;
            case 1:
                return '<span>银联</span>';break;
            case 2:
                return '<span>支付宝</span>';break;
            case 3:
                return '<span>微信</span>';break;
            case 4:
                return '<span>其它</span>';break;
            case 5:
                return '<span>余额支付</span>';break;
        }

    }
    // </editor-fold>


    //<editor-fold defaultstate="collapsed" desc="金额设置颜色">

    function forMoney(value) {
        if (Number(value) < 0)
            return '<span style="color: red">' + value + '</span>';
        else
            return '<span style="color: green">' + value + '</span>';

    }

    //</editor-fold>
</script>
{/block}